<template>
  <div id="BottomNavigation">
        <div id="BNCentent">
            <div id="BNC-T">
                <div id="BNC-T-Logo">
                    <div id="BNC-T-Logo-img"></div>
                    <div id="BNC-T-Logo-Title">绫城漫画</div>
                </div>
                <div id="BNC-T-Lianj">
                    <a href="">关于我们</a>
                    <a href="">联系我们</a>
                    <a href="">友情链接</a>
                    <a href="">加入我们</a>
                </div>
                <div id="BNC-T-Link"></div>
                <div id="BNC-T-Right-1" class="RightImg">
                    <a href="">
                        <img src="../Images/logo.jpg" alt="">
                        <div class="BNC-T-Right-Title">绫城账号</div>
                    </a>
                </div>
                <div id="BNC-T-Right-2" class="RightImg">
                    <a href="">
                        <img src="../Images/logo.jpg" alt="">
                        <div class="BNC-T-Right-Title">新浪微博</div>
                    </a>
                </div>
                <div id="BNC-T-Right-3" class="RightImg">
                    <a href="">
                        <img src="../Images/logo.jpg" alt="">
                        <div class="BNC-T-Right-Title">下载电脑客户端</div>
                    </a>
                </div>
            </div>
            <div id="BNC-B">
                <div id="BNC-B-left">
                    <div id="BNC-B-left-1" style="background-image:url('../Images/logo.jpg');"></div>
                    <div id="BNC-B-left-2" style="background-image:url('../Images/logo.jpg');"></div>
                </div>
                <div id="BNC-B-right">
                    <ul>
                        <li>客服QQ:2067044058</li>
                        <li>12318全国文化市场举报网站|上海市互联网违法和不良信息举报中心</li>
                        <li>漫画持续更新中</li>
                        <li>绝对控股人-龙少林;网站维护-龙少林;广告招租</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name : "BottomAssembly", 
}
</script>



<style>
   /* 底部导航的 */
    #BottomNavigation {
        background-color: rgb(33, 33, 33);
        height: 290px;
        width: 100%;
    }
    /* a标签取消下划线 */
    #BottomNavigation a {
        text-decoration: none;
    }
    
    /*左上紧挨*/
    * {
        margin: 0px;
        padding: 0px;
    }
    /* 剧中 */
    #BNCentent {
        width: 1160px;
        /* border: 1px red solid; */
        margin: 0px auto;
        background-color: rgb(33, 33, 33);
        height: 100%;
    }
    /* 上半部分 */
    #BNC-T {
        /* border: 1px solid wheat; */
        height: 100px;
        padding-bottom: 30px;
        padding-top: 30px;
    }
    /* 漫画Logo栏 */
    #BNC-T-Logo {
        /* background-color: yellow; */
        width: 320px;
        height: 70px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
  /*漫画图片*/
    #BNC-T-Logo-img {

        height: 70px;
        width: 70px;
        background-image: url('../Images/logo.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 10px;
        /* border: 1px solid black; */
        display: inline-block;
    }

    #BNC-T-Logo-Title {
        /* background-color: brown; */
        display: inline-block;
        font-size: 30px;
        color: rgb(185, 185, 185);
        position: relative;
        left: 30px;
        bottom: 22px;
    }



    /* 链接容器 */
    #BNC-T-Lianj {
        /* background-color:rgb(255, 255, 255); */
        width: 290px;
        padding-top: 20px;
    }

    /* 链接文字 */
    #BNC-T-Lianj a {
        font-size: 16px;
        margin-right: 70px;
        color: rgb(185, 185, 185);
        margin-bottom: 20px;
        display: inline-block;
    }

    /* 竖线 */
    #BNC-T-Link {
        height: 90px;
        margin-top: 5px;
        width: 1px;
        background-color: rgb(185, 185, 185);
        margin-left: 100px;
        margin-right: 25px;
    }

    /* 右三容器 */
    .RightImg{
        /* border: 1px solid yellow; */
        width: 140px;
        /* background-color: white; */
        text-align:center;
    }
    .RightImg img{
        /* background-color: violet; */
        width: 70px;
        height: 70px;
        border-radius: 50%;

    }
    .RightImg a{
        display:inline-block;
        /* border: 1px solid black; */
    }
    .BNC-T-Right-Title{
        margin-top: 5px;
        color: rgb(144, 144, 144);
        font-size: 14px;
    }

    /* 弹性布局 */
    #BNC-T,#BNC-B {
        display: flex;
    }

    #BNC-B{
        height: 90px;
    }

    #BNC-B-left{
        display: inline-block;
    }

    #BNC-B-left-1,#BNC-B-left-2{
        margin-top: 20px;
        margin-right: 20px;
        width: 130px;
        height: 50px;
        background-color: rgb(33, 33, 33);
        display: inline-block;
    }

    #BNC-B-right ul{
        list-style: none;
        margin-left: 20px;
    }
    #BNC-B-right ul li{
        font-size: 14px;
        margin-top: 2px;
        color: rgb(116,116,116);
    }

</style>